<!--
 * @Author: ssj
 * @Date: 2021-08-16 13:52:42
 * @LastEditors: swc
 * @LastEditTime: 2024-11-30 13:31:13
 * @Description: oImageSelectorCell
-->
<template>
  <div class="o-multi-selector">
    <div class="o-multi-box">
      <CheckboxGroup v-model="G_value" @on-change="onChange">
        <Checkbox
          :label="el.key"
          :border="el.border"
          v-for="(el, idx) in multiOptions"
          :key="idx"
          :title="$srv.getI18nBySrv(el.label)"
          :disabled="true"
        >
          <!-- <Icon v-show="el.icon" :type="`wy-icon ${el.icon}`"></Icon> -->
          <span v-show="el.icon" :class="`wy-icon ${el.icon}`"></span>
          <span>{{ $srv.getI18nBySrv(el.label) }}</span>
        </Checkbox>
      </CheckboxGroup>
    </div>
  </div>
</template>

<script lang="ts">
import { Tsrv, T_srv, vue, ts } from '@/services';

import { N_input } from '@/types';

@T_srv.comp
export default class oMultiSelectorCell extends vue {
  @T_srv.prop() renderOpts: any;

  @T_srv.prop() params: any;

  public G_compName: string = 'oMultiSelectorCell';

  private G_value: Array<string | number> = [];

  // multiOptions 多选配置项
  private multiOptions: Array<N_input.I_multiOption>;

  private G_paramsFromComp: 'oBaseGrid' | 'oBaseForm' | 'oBasePanel' = null;

  private currFieldName: string = '';

  @T_srv.watch('params')
  onParamsChange(val) {
    this.initProps();
    this.setValue();
  }

  created() {
    if (this.renderOpts.props.getTcommand()?.oBaseGrid?.G_compName) {
      this.G_paramsFromComp = 'oBaseGrid';
      this.currFieldName = this.params.column.property;
    } else if (this.renderOpts.props.getTcommand()?.oBaseForm?.G_compName) {
      this.G_paramsFromComp = 'oBaseForm';
      this.currFieldName = this.params.property;
    } else if (this.renderOpts.props.getTcommand()?.oBasePanel?.G_compName) {
      this.G_paramsFromComp = 'oBasePanel';
      this.currFieldName = this.params.property;
    } else {
      this.$msg({});
      console.error('未定义的组件');
    }
    if (Tsrv.noValue(this.currFieldName)) {
      this.$msg(Tsrv.getI18nByValue('获取不到当前字段名'));
    }
    this.init();
  }

  /**
   * @Author: ssj
   * @description: 初始化
   */
  private init() {
    this.initProps();
    let val;
    if (this.G_paramsFromComp === 'oBaseGrid') {
      val = this.params.row[this.currFieldName];
    } else if (this.G_paramsFromComp === 'oBaseForm') {
      val = this.params.data[this.currFieldName];
    } else if (this.G_paramsFromComp === 'oBasePanel') {
      val = this.params.data[this.currFieldName];
    }
    if (Tsrv.noValue(val)) {
      this.setValue('[]');
      return;
    }
    this.setValue(val); // val
  }

  private initProps(): void {
    this.multiOptions = this.renderOpts.props.multiOptions;
  }

  public setValue(val: null | string | undefined = undefined): void {
    const err = () => {
      this.$msg('-530,FE,90');
      console.error('json表达式不是一个数组');
    };
    if (Tsrv.utils.noValue(val)) {
      this.G_value = [];
    } else {
      if (typeof val === 'string') {
        try {
          const v: Array<string | number> = JSON.parse(val) || [];
          if (Array.isArray(v)) {
            this.G_value = v;
          } else {
            err();
          }
        } catch {
          err();
        }
      } else if (typeof val === 'object') {
        Array.isArray(val) && (this.G_value = val);
      } else {
        err();
      }
    }
    // this.setTableValue();
  }

  /**
   * @Author: ssj
   * @description: 修改表值
   */
  public setTableValue(): void {
    if (this.currFieldName) {
      if (this.G_paramsFromComp === 'oBaseGrid') {
        this.params.row[this.params.column.field] = Tsrv.utils.toJSONString(
          this.G_value
        );
      } else if (this.G_paramsFromComp === 'oBaseForm') {
        this.params.data[this.currFieldName] = Tsrv.utils.toJSONString(
          this.G_value
        );
      } else if (this.G_paramsFromComp === 'oBasePanel') {
        this.params.data[this.currFieldName] = Tsrv.utils.toJSONString(
          this.G_value
        );
      }
    }
  }
}
</script>

<style scoped lang="scss">
.o-multi-selector {
  border-bottom: 1px solid var(--default-border-color);
  padding: 3px;
  background-color: #fff;
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
  .o-multi-box {
    overflow: hidden;
  }
}
</style>
